<template>
<div class="bbg1" style="height:820px;padding-top:150px;">

	<div style="width:480px;margin:0 auto;background:rgba(19,90,108,0.9);border:1px solid rgba(60, 239, 241, 1);border-radius:2px;">
		<div style="padding: 15px 20px 15px 20px;background-image:linear-gradient(90deg, #11b0b5 10%, #116389 90%);color:#fff;">
			修改密码
		</div>

		<div style="margin-top:40px;">
			<el-form ref="form" :rules="rules2" :model="form" label-width="120px"
			>
				<el-form-item label="旧密码：" prop="oldPass">
					<el-input type="password" v-model="form.oldPass" style="width:330px;"></el-input>
				</el-form-item>
				<el-form-item label="密码：" prop="pass">
					<el-input type="password" v-model="form.pass" style="width:330px;"></el-input>
				</el-form-item>
				<el-form-item label="确认密码：" prop="checkPass">
					<el-input type="password" v-model="form.checkPass" style="width:330px;"></el-input>
				</el-form-item>
			</el-form>

			<el-row class="text-center mt30 mb30">
				<el-button type="primary" @click="onSubmit()"
			    style="width:160px;background:#19a65b;border:1px solid #1fe77c;"
			    >立即修改</el-button>
			</el-row>

		</div>
	</div>

</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
	
	name : 'modifyPassword',
	
	data () {
		var validateOldPass = (rule, value, callback) => {
			this.checkOldPass(value, callback);
		};

		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.form.checkPass !== '') {
					this.$refs.form.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
		  	form : {
		  		oldPass : '',
		  		pass : '',
		  		checkPass : '',
		  	},

		  	rules2: {
		  		oldPass : [
		  			{ required: true, message: '请输入旧密码', trigger: 'blur' },
		  			{ validator: validateOldPass, trigger: 'blur' }
		  		],
				pass: [
					{ required: true, message: '请输入新密码', trigger: 'blur' },
					{ validator: validatePass, trigger: 'blur' }
				],
				checkPass: [
					{ required: true, message: '请再次输入新密码', trigger: 'blur' },
					{ validator: validatePass2, trigger: 'blur' }
				],
			}
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			'userInfo',
		]),
	},

	methods : {
		onSubmit () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$http({
						fun : 'modifyPassword',
						password : this.form.pass,
						cb : res => {
							this.$message.success('修改成功');
						},
						err : res => {
							this.$message.error(res);
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},

		checkOldPass (value, callback) {

			this.$http({
				fun: 'login',
				username: this.userInfo.loginName,
				password: this.form.oldPass,
				requestType: 'get',
				cb : res => {
					console.log('laksdjlasjdlkdsajdas');
					console.log(res);
					if(res.errcode == '1004'){
						callback(new Error('密码错误'));
					}else{
						callback();
					}
				}
			});
		}
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>

</style>
